<template>
  <div class="content-user">
    <div class="user-title">
      <div class="title-uinfo">
        <div class="uinfo-le">
          <p>{{ uinfo.username }}</p>
          <span>{{ uinfo.signature }}</span>
        </div>
        <div class="uinfo-rg">
            <img :src="uinfo.uportrait" alt="" @click="gouserindex">
        </div>
      </div>
      <div class="title-contact">
        <div class="contact-xx">
          <span class="xx-num">999</span>
          <span class="xx-name">人气</span>
        </div>
        <div class="contact-xx">
          <span class="xx-num">{{ fslength || 0 }}</span>
          <span class="xx-name">粉丝</span>
        </div>
        <div class="contact-xx">
          <span class="xx-num">{{ gzlength || 0 }}</span>
          <span class="xx-name">关注</span>
        </div>
      </div>
    </div>
    <div class="user-relese">
      <div class="rel-box" @click="$router.push('/zplist')">
        <i class="iconfont icon-zuopin"></i>
        <span>我的作品</span>
      </div>
      <div class="rel-box" @click="$router.push('/yplist')">
        <i class="iconfont icon-xiangji2"></i>
        <span>我的约拍</span>
      </div>
      <div class="rel-box" @click="$router.push('/jclist')">
        <i class="iconfont icon-jiaocheng"></i>
        <span>我的教程</span>
      </div>
      <div class="rel-box" @click="$router.push('/cdlist')">
        <i class="iconfont icon-zhuye"></i>
        <span>我的场地</span>
      </div>
    </div>
    <div class="">
      <van-cell is-link title="我的资料" @click="touinfo" icon="friends-o" size="large"/>
      <van-cell is-link title="我的收藏" to="/sclist" icon="like-o" size="large"/>
      <van-cell is-link title="设置中心" to="/index" icon="setting-o" size="large"/>
      <van-cell is-link title="帮助反馈" to="/ufk" icon="service-o" size="large"/>
      <van-cell is-link title="退出登录" @click="backlogin" icon="info-o" size="large"/>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";
import { Dialog } from 'vant';

export default {
  name: "appuser",
  data(){
    return{
      file: 'https://icweiliimg6.pstatp.com/weili/sm/254329013950218271.jpg',
      uinfo: {},
      gzlength: '',
      fslength: '',
    }
  },
  created() {
    const uid = localStorage.getItem("uid")
    if(uid){
      this.uinfofind(uid)
      this.followfind(uid)
      this.whofollowfind(uid)
    }else {
      Dialog.alert({
        title: '温馨提示',
        message: '您还未登录，确定返回登录页',
      }).then(() => {
        this.$router.replace('/')
      });
    }
  },
  methods:{
    async uinfofind(uid){
      try {
        const res = await this.$axios({
          url:'/blog/userfindall',
          method:"post",
          data:{
            uid,
          }
        })
        const {success, msg, data} = res.data
        if (success){
          console.info(data[0])
          this.uinfo = data[0]
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    async followfind(uid){
      try {
        const res = await this.$axios({
          url:'/blog/followfind',
          method:"post",
          data:{
            uid,
          }
        })
        const {success, msg, data} = res.data
        if (success){
          console.info(data)
          this.gzlength = data.length
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    async whofollowfind(uid){
      try {
        const res = await this.$axios({
          url:'/blog/followfind',
          method:"post",
          data:{
            followerid: uid,
          }
        })
        const {success, msg, data} = res.data
        if (success){
          console.info(data)
          this.fslength = data.length
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    touinfo(){
      this.$router.push({
        name: "uinfo",
        params: {
          release: this.uinfo
        }
      })
    },
    gouserindex(){
      this.$router.push({
        name: "userindex",
        params: {
          user: this.uinfo
        }
      })
    },
    backlogin(){
      Dialog.confirm({
        title: '温馨提示',
        message: '确认退出当前账号吗?',
      })
        .then(() => {
          localStorage.clear()
          this.$router.replace('/')
        })
        .catch(() => {
          // on cancel
        });

    },
  },
}
</script>

<style scoped lang="scss">
.content-user{
  height: 100%;
  background-color: #ffffff;
  overflow: auto;
  .user-title{
    height: vw(495);
    border-radius: 0 0 vw(80) vw(80);
    background-color: #ab7dc8;
    box-shadow: vw(10) vw(20) vw(40) vw(0) #a68fb5;
    overflow: hidden;
    .title-uinfo{
      width: 100%;
      margin-top: vw(90);
      height: vw(185);
      display: flex;
      box-sizing: border-box;
      .uinfo-le{
        width: vw(500);
        padding-left: vw(40);
        box-sizing: border-box;
        p{
          font-size: vw(55);
          font-weight: bold;
          padding: vw(15) 0;
          color: #eaeaea;
        }
        span{
          color: #d5d5d5;
          font-size: vw(32);
        }
      }
      .uinfo-rg{
        position: relative;
        img{
          width: vw(180);
          height: vw(180);
          border-radius: 50%;
          object-fit: cover;
        }
      }
    }
    .title-contact{
      height: vw(125);
      padding-left: vw(40);
      box-sizing: border-box;
      display: flex;
      margin-top: vw(20);
      .contact-xx{
        width: vw(100);
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        .xx-num{
          font-size: vw(40);
          font-weight: bold;
          padding-bottom: vw(10);
          color: #eaeaea;
        }
        .xx-name{
          font-size: vw(28);
          color: #d5d5d5;
        }
      }
    }
  }
  .user-relese{
    width: 100%;
    margin: vw(50) 0;
    padding: 0 vw(20);
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    .rel-box{
      display: flex;
      flex-direction: column;
      text-align: center;
      i{
        font-size: vw(60);
        padding-bottom: vw(15);
      }
      span{
        font-size: vw(26);
      }
    }
  }
}
::v-deep .van-cell{
  padding: 12px 25px;
}
</style>
